<template>
	<view class="goodItem">
		<view class="goodBox">
			<!-- <view class="goodNav">订单信息</view> -->
			<!-- <view class="goodNavTitle">
				<view>取消订单：0</view>
				<view>总消费：0</view>
			</view> -->
			<view class="delGoods">
				<view class="delGoodsItem">
					<view @click="clickIndexFn(-1)" :class="{'boxItemNav':true, 'clorSize': indexed==-1?true:false}">
						<view :class="{'titleNavAll':true, 'textColorBox': indexed==-1?true:false}">全部订单</view>
						<view :class="{'numItem':true,'textColorBox1': indexed==-1?true:false}">{{nuMobj.allNum}}
						</view>
						<view :class="{'lineItem':true, 'lineColor': indexed==-1?true:false}"></view>
					</view>
					<view @click="clickIndexFn(1)" :class="{'boxItemNav':true, 'clorSize': indexed==1?true:false}">
						<view :class="{'titleNavAll':true, 'textColorBox': indexed==1?true:false}">待付款</view>
						<view :class="{'numItem':true,'textColorBox1': indexed==1?true:false}">{{nuMobj.toPay}}</view>
						<view :class="{'lineItem':true, 'lineColor': indexed==1?true:false}"></view>
					</view>
					<view @click="clickIndexFn(2)" :class="{'boxItemNav':true, 'clorSize': indexed==2?true:false}">
						<view :class="{'titleNavAll':true, 'textColorBox': indexed==2?true:false}">待发货</view>
						<view :class="{'numItem':true,'textColorBox1': indexed==2?true:false}">{{nuMobj.toSend}}
						</view>
						<view :class="{'lineItem':true, 'lineColor': indexed==2?true:false}"></view>
					</view>
					<view @click="clickIndexFn(3)" :class="{'boxItemNav':true, 'clorSize': indexed==3?true:false}">
						<view :class="{'titleNavAll':true, 'textColorBox': indexed==3?true:false}">待收货</view>
						<view :class="{'numItem':true,'textColorBox1': indexed==3?true:false}">{{nuMobj.toReceive}}
						</view>
						<view :class="{'lineItem':true, 'lineColor': indexed==3?true:false}"></view>
					</view>
					<view @click="clickIndexFn(8)" :class="{'boxItemNav':true, 'clorSize': indexed==8?true:false}">
						<view :class="{'titleNavAll':true, 'textColorBox': indexed==8?true:false}">已完成</view>
						<view :class="{'numItem':true,'textColorBox1': indexed==8?true:false}">{{nuMobj.complete}}
						</view>
						<view :class="{'lineItem':true, 'lineColor': indexed==8?true:false}"></view>
					</view>
				</view>
			</view>

		</view>

		<view v-if="goodListArray.length>0">
			<view class="navGoodItemw" v-for="item in goodListArray">
				<view class="navGoodBox">
					<view class="timeShowBox">
						<view class="priceDateBox">
							<view class="titleBox">{{item.orderTime}}</view>
						</view>
						<!--  indexed=='0'?getAllType(item):goodText -->
						<view class="fiStatusBox">{{item.orderStatus}}</view>
					</view>
<!-- 					<view class="priceDateBox">

					</view>
					<view class="timeShowBox">
	
					</view> -->
					<view class="imgBoxs bgImg">
						<view class="leftBox1">
							<image class="imgW" :src="item.foodImg"></image>
							<view class="rigthItm">
								<view>
									<view class="textBox">{{item.foodName}}</view>
								</view>
								<view class="boxs">
									<view class="boxCout">余额:￥{{item.deductionPrice}} <text style="margin-left:20rpx;"
											v-if="item.userPaid != 0">微信:￥{{item.userPaid}} </text> </view>
									<view class="boxCout" v-if="item.userPaid != 1"></view>
								</view>
								<view class="boxNum">
									<span class="boxCout">x {{item.totalNum}}件</span>
									<view class="payCla">
										<span>合计</span>
										<span class="boxText">￥{{item.totalAmount}}</span>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="rigthBox1"> -->
						<!-- <view>
								<view>
									<view>{{item.foodName}}</view>
								</view>
								<view class="boxs">
									<view>优惠：{{item.couponValue}} <span class="mgBox">总共：{{item.count}}件</span></view>
								</view>
							</view> -->
						<!-- <view class="boxNum">
								<view>共{{item.count}}件</view>
								
							</view>
						</view> -->
					</view>
					<view class="titleBox">地址：{{item.pickUpAddress}}</view>	

					<view class="dPayBox">
						<view class="moreBox" v-if="item.totalNum!=1" @click="toggle(item)">更多</view>
						<view class="moreBox" v-if="item.totalNum==1"></view>
						<view class="btnBox" v-if="item.orderStatus=='待收货'">
							<!-- <view class="boxsq">待收货</view> -->
							<view class="boxsq" @click="payFn(item)">再来下单</view>
						</view>
						<view class="btnBox" v-if="item.orderStatus=='待支付'">
							<view class="boxsq fullBoxItem">待支付</view>
							<view class="boxsq payBoxItem" @click="paySetFn(item)">去支付</view>
							<view class="boxsq" v-if="item.qxShow" @click="qxGoods(item)">取消订单</view>
						</view>
						<view class="btnBox" v-if="item.orderStatus=='待发货'">
							<view class="boxsq fullBoxItem">待配送</view>
							<view class="boxsq" @click="payFn(item)">再来下单</view>
							<view class="boxsq" v-if="item.qxShow" @click="qxGoods(item)">取消订单</view>
						</view>
						<view class="btnBox" v-if="item.orderStatus=='已取消'">
							<view class="boxsq lefBox">已取消</view>
							<view class="boxsq" @click="payFn(item)">再来下单</view>
						</view>
						<view class="btnBox" v-if="item.orderStatus=='已完成'">
							<!-- <view class="boxsq fullBoxItem" @click="goshFn(item)">
								{{item.afterSaleId != null ? '售后进度' : '申请售后'}}
							</view> -->
							<view class="boxsq" @click="payFn(item)">再来下单</view>
							<!-- <view class="boxsq lefBox" @click="goPinFn(item)">评价</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noDatabg" v-else>
			<img src="../../../static/noDatabg.png" alt="" />
		</view>
		<view class="posiBottom">
			<uni-popup :round="15" scroll-y="true" :overlayStyle="{'touch-action':'none'}" class="popupWidth"
				ref="popup" type="center">
				<view>
					<view class="boxpopuBox">
						<view class="posiContent" v-for="item in showArr">
							<view class="priceDateBox pricMar">
								<view class="titleBox lihItem">时间：{{item.orderTime}}</view>
								<view class="lihItem goodBoxsClss">
									<view>菜名：{{item.foodName}}</view>
									<view class="rigthGoods">
										<view>x{{item.foodNum}}</view>

									</view>
								</view>
								<view class="money">共￥{{item.showPrice * item.foodNum}}元</view>

							</view>
							<view class="imgBoxs">
								<image class="imgW" :src="item.foodImg"></image>

							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getGoodList,
		getqueryOrderDetailsqx,
		login,
		topayInfo,
		getCenterGoods,
	} from "@/request/api.js";
	import util from '@/utils/util.js';
	import MyMinix from '@/utils/minix/minix.js';
	export default {
		mixins: [MyMinix],
		data() {
			return {
				indexed: -1,
				//订单中心列表数据类型
				status: -1,
				goodListArray: [],
				showArr: [],
				goodText: "",
				page: 1,
				sizeTotal: 1,
				nuMobj: {
					toPay: 0,
					toSend: 0,
					toReceive: 0,
					toReview: 0,
					allNum: 0,
					complete:0
				}
			}
		},
		onLoad(option) {
			console.log(option, 'option');
			let that = this
			that.status = option.status
			that.indexed = that.status
			this.goodListArray = [];
			console.log(666);
			this.page = 1;
			// that.getGoodListFn()
			that.getdeCenterFn()
		},
		onReachBottom() {
			console.log(this.goodListArray, this.sizeTotal,"????");
			if (this.goodListArray.length < this.sizeTotal) {
				this.page += 1;
				this.getGoodListFn()
			}
		},
		methods: {
			goshFn(item) {
				console.log(item, 'itemitem');
				if (item.goodArr.afterSaleId) {
					// util.goToUrl('/pages/myPage/shPage/shPage?goodId=' + item.goodId);
					util.goToUrl('/pages/myPage/stepsPage/stepsPage?afterSaleId=' + item.goodArr.afterSaleId);
				} else {
					util.goToUrl('/pages/myPage/shPage/shPage?goodId=' + item.goodId);
				}
			},
			goPinFn(item) {
				util.goToUrl('/pages/myPage/pinPage/index?goodId=' + item.goodId + '&imageUrl=' + item.foodImg +
					'&foodName=' + item.foodName);
			},
			setOption(option) {
				let that = this
				if (option.toPay) {
					that.nuMobj.toPay = option.toPay
				} else {
					that.nuMobj.toPay = 0
				}
				if (option.toSend) {
					that.nuMobj.toSend = option.toSend
				} else {
					that.nuMobj.toSend = 0
				}
				if (option.toReceive) {
					that.nuMobj.toReceive = option.toReceive
				} else {
					that.nuMobj.toReceive = 0
				}
				
				if (option.toReview) {
					that.nuMobj.toReview = option.toReview
				} else {
					that.nuMobj.toReview = 0
				}
				if (option.complete) {
					that.nuMobj.complete = option.complete
				} else {
					that.nuMobj.complete = 0
				}
				if (option.total) {
					that.nuMobj.allNum = option.total
				} else {
					that.nuMobj.allNum = 0
				}
				console.log(option, 'option.toPay');
				console.log(that.nuMobj, 'option.toPay12');
				that.goodListArray = [];
				that.getGoodListFn()
				// that.getTextFn()
			},
			//获取userId
			getUserId() {
				let token = uni.getStorageSync('token').split('.')
				let userinfo = token[1].replace(/-/g, '+').replace(/_/g, '/')
				// 解码base
				let info = new Buffer(userinfo, 'base64').toString('utf8')
				let userId = JSON.parse(info).username.split('token_')[1]
				return userId
			},
			// 订单中心数量
			async getdeCenterFn() {
				let that = this;
				let userInfo = uni.getStorageSync('userInfo');
				let res = await getCenterGoods({
					method: "GET",
					data: {
						"companyId": userInfo.companyId,
						"phone": userInfo.phoneNumber,
					},
				})
				if (res.code == 200) {
					that.setOption(res.data)
					// that.goodObj = res.result
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
				console.log(res, 'resres')
			},
			//取消支付
			async qxGoods(obj) {
				let that = this;
				// let show = that.getStatuFn(obj.orderTime)'
				let show = (obj.orderStatus == '待发货')
				if (!show) {
					return uni.showToast({
						title: "对不起，该订单不能取消!",
						icon: 'none',
					})
				}
				let res = await getqueryOrderDetailsqx({
					method: "GET",
					data: {
						orderId: obj.orderId
					},
				})
				console.log(res, 'ress==');
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
					});
					that.clickIndexFn(that.indexed)
					that.getdeCenterFn()
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			},

			//再来下单
			payFn(obj) {
				let that = this;
				util.goToUrl('/pages/order/createOrder?id=' + obj.orderId);

			},
			//去支付
			async paySetFn(obj) {
				let that = this;

				let res = await topayInfo({
					method: "GET",
					data: {
						orderId: obj.orderId
					},
				})
				if (res.code == 200) {
					console.log(res, 'reeedd2');
					let pay = await util.payMent(res.data)
					console.log(pay, 'reeeddpay');
					if (pay.errMsg == 'requestPayment:ok') {
						uni.showToast({
							title: "支付成功!",
							icon: 'success',
						})
						that.indexed = '2'
						that.clickIndexFn('2')
						that.getdeCenterFn()
					} else if (pay.errMsg == 'requestPayment:fail cancel') {
						uni.showToast({
							title: "取消支付!",
							icon: 'none',
						})
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			},
			toggle(obj) {
				this.showArr = obj.items
				console.log(obj, '12313');
				this.$refs['popup'].open();

			},
			//处理全部列表数据
			getAllType(obj) {
				let text = ""
				let that = this
				if (obj.type == 'toPay') {
					text = '待付款'
				} else if (obj.type == 'toSend') {
					text = '待发货'
				} else if (obj.type == 'toReceive') {
					text = '待收货'
				} else if (obj.type == 'toReview') {
					text = '待评价'
				}else if(obj.type == 'complete'){
					text = '已完成'
				} else {
					text = '已取消'
				}
				return text
			},
			clickIndexFn(index) {
				let that = this
				that.status = index
				that.indexed = index
				that.goodListArray = []
				that.getGoodListFn()
				// that.getTextFn()
			},
			getTextFn() {
				let that = this
				if (that.indexed == '0') {
					that.goodText = '全部'
				} else if (that.indexed == '1') {
					that.goodText = '待支付'
				} else if (that.indexed == '2') {
					that.goodText = '待发货'
				} else if (that.indexed == '3') {
					that.goodText = '待收货'
				} else if (that.indexed == '4') {
					that.goodText = '已完成'
				} else {
					that.goodText = '已取消'
				}
			},
			//是否隐藏取消订单
			getcalBtn(date) {
				console.log(date, 'dateeee');
			},
			//比较当前时间与取消时间大小，用与判断是否显示true或者false
			getStatuFn(date) {
				let status = false
				let nowDate = Date.parse(new Date())
				let endTime = Date.parse(date);
				// 如果 当前时间 大于 下单时间后30分钟  不可以取消
				if (nowDate > (endTime + 1800000)) {
					status = false
				} else {
					status = true
				}
				return status

			},
			//获取订单列表数据
			async getGoodListFn() {
				let that = this
				// that.getStatuFn('2024-01-19')
				let userInfo = uni.getStorageSync('userInfo');
				let res = await getGoodList({
					method: "POST",
					data: {
						"companyId": userInfo.companyId,
						"phone": userInfo.phoneNumber,
						status: that.status,
						page: that.page,
						size: 10,
					},
				})
				if (res.code == 200) {
					console.log(res.data.records, 'that.goodListArray12');
					let {
						records: list,
						total: sizeTotal
					} = res.data;
					console.log(list, 'list');
					if (list.length > 0) {
						list.forEach((item, index) => {
							console.log(item);
							item.foodImg = item.items[0].foodImg
							item.foodName = item.items[0].foodName
							item.items.forEach(items => items.orderTime = item.orderTime);
							// item.qxShow = that.getStatuFn(item.orderTime);
							item.qxShow = (item.orderStatus == '待发货')
						})
						that.goodListArray = that.goodListArray.concat(list);
					}
					that.sizeTotal = sizeTotal;
					// if (Object.keys(list).length > 0) {
					// 	let arr = Object.keys(list)
					// 	let arrList = []
					// 	arr.forEach(item => {
					// 		let obj = {
					// 			total: 0,
					// 			imgArr: [],
					// 			orderTime: "",
					// 			foodName: "",
					// 			count: 0,
					// 			type: "",
					// 			goodId: '',
					// 			goodArr: [],
					// 			couponValue: 0,
					// 			qxShow: true,
					// 			totalPrice: 0
					// 		}
					// 		if ([list[item]].length > 0) {

					// 			[list[item]].forEach(item1 => {
					// 				console.log(item1, 'item1item1');
					// 				obj.orderTime = item1.orderTime
					// 				item1.items.forEach(item2 => {
					// 					console.log(item2.foodPrice, 'item2item2');
					// 					obj.total = Number(item2.foodPrice) + Number(obj.total)
					// 					obj.totalPrice = Number(item2.foodPrice) + Number(obj
					// 						.totalPrice)
					// 					obj.count = Number(obj.count) + Number(item2.count)
					// 					obj.imgArr.push(item2.foodImage)
					// 					obj.foodName = item2.foodName
					// 					item2.orderTime = obj.orderTime
					// 				})

					// 				obj.goodArr = item1.foods;
					// 				obj.type = item1.type;
					// 				obj.afterSaleId = item1.afterSaleId;
					// 				obj.goodId = item1.orderId;
					// 				obj.couponValue = item1.couponValue;
					// 				obj.qxShow = that.getStatuFn(item1.canCancelTime);
					// 			})
					// 			obj.goodArr = list[item]
					// 			obj.totalPrice = (obj.totalPrice / 100).toFixed(2)
					// 			arrList.push(obj)
					// 		}

					// 	})
					// 	console.log(arrList, 'that.goodListArray');
					// 	that.goodListArray = [...arrList]
					// }


				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
				console.log(res, 'res33333')
			},
		},

	}
</script>

<style lang="scss" scoped>
	.goodItem {
		background-color: #f0eeeb;
		min-height: 100vh;

		.noDatabg {
			width: 600rpx;
			height: 600rpx;
			margin: 200rpx auto 0;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.goodBox {
			background-color: #eb5b1e;
			padding: 30rpx 30rpx 20rpx 30rpx;
			// height: 12vw;
			position: relative;
			// padding-bottom: 72rpx;

			.goodNav {
				color: #fff;
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}

			.goodNavTitle {
				color: #e8e8e8;
				display: flex;

				view {
					margin-right: 10rpx;
				}
			}

			.delGoods {
				// position: absolute;
				// margin-top: 30rpx;
				// top: 22rpx;

				.delGoodsItem {
					// width: 95vw;
					display: flex;
					justify-content: space-between;
					background-color: #fff;
					padding: 20rpx;
					padding-bottom: 0rpx;
					box-sizing: border-box;
					border-radius: 20rpx;

					// box-shadow: 0px 3px 3px #f0f0f0;
					.boxItemNav {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-weight: 700;
						color: #7c7c7c;

						.clorSize {
							color: #000 !important;
						}

						.titleNavAll {
							text-align: center;
							color: #666666;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
						}

						.textColorBox {
							color: #000000;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
						}


						.numItem {
							text-align: center;
							margin-top: 15rpx;
							color: #666666;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
						}

						.textColorBox1 {
							color: #000000;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
						}

						.lineColor {
							background-color: #FD6816;
						}

						.lineItem {
							margin-top: 10rpx;
							width: 60rpx;
							height: 4rpx;
							border-radius: 4rpx;
							margin-bottom: 5rpx;

						}
					}
				}
			}


		}

		.navGoodItemw {
			display: flex;
			justify-content: center;
			box-sizing: border-box;

			.navGoodBox {
				width: 100%;
				margin: 30rpx;
				margin-bottom: 0;
				box-sizing: border-box;
				background-color: #fff;
				padding: 30rpx;
				// display: flex;
				// flex-direction: column;
				border-radius: 10rpx;

				.timeShowBox {
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid #eeeeee;
				}

				.fiStatusBox {
					mix-blend-mode: normal;
					color: #ff0000;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
				}

				.priceDateBox {
					margin-bottom: 15rpx;

					.titleBox {
						color: #666666;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
					}
				}

				.imgBoxs {
					display: flex;
					margin-top: 20rpx;
					flex-wrap: wrap;
					border-bottom: 2rpx solid #eeeeee;
					padding-bottom: 28rpx;
					position: relative;

					.imgW {
						width: 180rpx;
						height: 180rpx;

						border-radius: 20rpx;
					}
				}

				.boxNum {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.payCla {
						margin-left: 10rpx;
						color: #000000;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
					}

					.boxText {
						color: #ff0000;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
					}
				}

				.dPayBox {
					margin-top: 25rpx;
					display: flex;
					justify-content: space-between;

					.btnBox {
						display: flex;

						.boxsq {
							width: 160rpx;
							height: 56rpx;
							border-radius: 10rpx;
							border: 2rpx solid #666666;
							text-align: center;
							line-height: 56rpx;
							color: #000000;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							margin-left: 20rpx;
						}

						.lefBox {
							color: #666666;
							border: 2rpx solid #666666;
						}

						.fullBoxItem {
							background: #eb5b1e;
							border: 2rpx solid #eb5b1e;
							color: #fff;
						}

						.payBoxItem {
							color: #eb5b1e;
							border: 2rpx solid #eb5b1e;
						}

						.boxpay_btn {
							padding: 10rpx;
							color: #fff;
							background-color: #1772f6;
							border: 1rpx solid #1772f6;
							margin-right: 15rpx;
							border-radius: 15rpx;
						}
					}

					.moreBox {
						font-size: 28rpx;
						color: #7c7c7c;
						line-height: 62rpx;
					}
				}
			}
		}
	}

	.posiContent {
		width: 600rpx;
		padding: 30rpx 30rpx 0;

		// width: 80vw;
		&:last-child {
			padding-bottom: 30rpx;
		}

		.popWidth {
			// width: 90vw;
			height: 20vh;
			font-weight: 800;
			font-size: 35rpx;
		}

		.imgBoxs {
			display: flex;
			justify-content: center;

			.imgW {
				width: 600rpx;
				height: 600rpx
			}
		}
	}

	.bgImg {
		display: flex;

		.leftBox1 {
			display: flex;
			width: 100%;
			position: relative;

			.textBox {
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;

				.boxCout {
					color: #000000;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
				}
			}

			.rigthItm {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				.boxs {
					&>view:nth-child(2) {
						margin-top: 5rpx;
					}
				}
			}

			.num {}
		}

		.rigthBox1 {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: absolute;
			right: 2rpx;
			top: 140rpx;

			.boxs {
				margin-top: 15rpx;
			}

		}
	}

	.popupWidth {
		width: 70vw;

	}

	.boxpopuBox {
		max-height: 750rpx; // 固定高度
		overflow-y: scroll; // 超出滚动
		overscroll-behavior: none; // 禁止滚动溢出
		font-size: 28rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.pricMar {

		// margin-bottom: 15rpx;
		&>view {
			margin-bottom: 10rpx;
		}
	}

	.lihItem {
		// line-height: 70rpx;
		// height: 70rpx;
		@include flexs(space-between, center);

		&>view:first-child {
			width: calc(100% - 50rpx);
		}
	}

	.goodBoxsClss {
		display: flex;
	}

	.rigthGoods {}

	.money {
		color: #FD0000;
	}

	.mgBox {
		padding-left: 20rpx;
	}
</style>